<template>
    <el-drawer v-model="dialogVisible" title="设置轮播图" size="50%" destroy-on-close>
        <el-form :model="form" label-width="80px">
            <el-form-item label="轮播图">
                <ChooseImage v-model="form.banners" :limit="9" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :loading="loading" @click="submit">提交</el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
</template>
<script setup>
import { ref, reactive } from 'vue'
import ChooseImage from '~/components/ChooseImage.vue'

import { readGoods, setGoodsBanner } from '~/api/goods'
import { toast } from '~/composables/util'

const dialogVisible = ref(false)

const form = reactive({
    banners: [],
})

const goodsId = ref(0)
const open = (row) => {
    goodsId.value = row.id
    row.bannersLoading = true
    readGoods(goodsId.value)
        .then((res) => {
            form.banners = res.goodsBanner.map((o) => o.url)
            dialogVisible.value = true
        })
        .finally(() => {
            row.bannersLoading = false
        })
}
const emit = defineEmits(['reloadData'])
const loading = ref(false)
const submit = () => {
    loading.value = true
    setGoodsBanner(goodsId.value, form)
        .then((res) => {
            toast('设置轮播图成功')
            dialogVisible.value = false
            emit('reloadData')
        })
        .finally(() => {
            loading.value = false
        })
}

defineExpose({
    open,
})
</script>
